
<template>
  <div class="orderdetails">
    <!------------------------------------------------------返回导航------------------------------------------------------------------>
    <HeaderTitle :title="WebName"></HeaderTitle>
    <van-pull-refresh v-model="MianLoading" @refresh="onRefresh">
      <!------------------------------------------------------订单状态------------------------------------------------------------------>
      <div class="orderState" v-if="order.status===1">订单状态未支付</div>
      <div class="orderState" v-if="order.status===2">订单代发货</div>
      <div class="orderState" v-if="order.status===3">订单待收货</div>
      <div class="orderState" v-if="order.status===4">订单完成</div>
      <!------------------------------------------------------收货地址------------------------------------------------------------------>
      <van-panel :title="address.name" icon="location-o" :status="address.phone" class="address">
        <div>{{address.province}}{{address.city}}{{address.county}}{{address.address}}</div>
      </van-panel>
      <van-card
        num="1"
        :price="commodity.price"
        :desc="commodity.details"
        :title="commodity.name"
        :thumb="commodity.img"
      />
      <div class="listContent">
        <van-cell title="合计金额" :value="('￥'+order.price)" size="large" class="total" />
        <van-cell title="商品总价" :value="('￥'+commodity.price)" />
        <van-cell title="运费" :value="post.price" />
        <van-cell :title="('订单编号：'+order.orderNum)" />
        <!-- <van-cell title="物流单号：12345678" /> -->
        <van-cell :title="('下单时间：'+order.createTime)" />
      </div>

    </van-pull-refresh>
    <van-goods-action>
      <!-- <van-button color="#333333" round size="small"  plain @click="$toast.fail('功能开发中……')">查看物流</van-button> -->
      <van-button round type="info" size="small" plain @click="$toast.fail('功能开发中……')" v-if="order.status===1">支付订单</van-button>
      <van-button round type="info" size="small" plain @click="$toast.fail('功能开发中……')" v-if="order.status===3">查看物流</van-button>
      <van-button round type="info" size="small" plain @click="$toast.fail('功能开发中……')" v-if="order.status===3">确认收货</van-button>
      <van-button round type="info" size="small" plain @click="$toast.fail('功能开发中……')" v-if="order.status===4">申请售后</van-button>
    </van-goods-action>
  </div>
</template>
<script>
/* ... */
import HeaderTitle from '@/components/HeaderTitle.vue'
import { getOrderDetail } from '@/api/api'
export default {
  name: 'real',

  mixins: [],

  components: {
    HeaderTitle
  },

  props: {},

  data () {
    return {
      WebName: '订单详情',
      MianLoading: false,
      count: 0,
      orderId: this.$route.query.order,
      address: [],
      commodity: [],
      order: [],
      post: []
    }
  },

  computed: {},

  watch: {},

  created () {
    if (localStorage.getItem('X-Auth-Token')) {
      var data = { orderId: this.orderId }
      this.getJsonData(data)
    } else {
      this.$toast.fail('您未曾登陆')
      this.$router.push('./login?tabs=0')
    }
  },

  mounted () {},

  destroyed () {},

  methods: {
    // 列表数据请求
    getJsonData (data) {
      getOrderDetail(this.$qs.stringify(data))
        .then(res => {
          this.post = res.data.data.post
          this.address = res.data.data.address
          this.commodity = res.data.data.commodity
          this.order = res.data.data.order
          console.log(res.data.data)
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 下拉刷新事件
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.MianLoading = false
        this.count++
      }, 500)
    }
  }
}
</script>

<style lang="less" >
/* ... */

.container {
  margin: 0 15px;
}
.orderdetails {
  height: 100%;
  background-color: #f6f6f6;
  .van-pull-refresh {
    height: calc(100% - 50px);
    overflow-y: auto;
    .orderState {
      padding: 30px 0;
      text-align: center;
      color: #404040;
      font-size: 15px;
    }
    .address {
      .van-cell {
        .van-cell__title {
        }
        .van-cell__value {
          color: #404040;
        }
      }
      .van-cell:not(:last-child)::after {
        border-bottom: none;
      }
      .van-panel__content {
        div {
          padding: 0px 15px 15px 15px;
          font-size: 12px;
          color: #404040;
        }
      }
    }
    .van-card {
      background-color: #ffffff;
      .van-card__header {
        .van-card__content {
          .van-card__bottom {
            .van-card__price {
              color: #ff7c00;
            }
          }
        }
      }
    }
    .listContent {
      margin-top: 10px;
      .total {
        .van-cell__value {
          color: #ff7c00;
        }
      }
      .van-cell {
        padding-top: 4px;
        padding-bottom: 4px;
      }
      .van-cell:not(:last-child)::after {
        border: none;
      }
    }
  }
  .van-goods-action {
    padding: 0 10px;
    display:initial;
    text-align: right;
    button {
      margin: 10px 0 10px 10px;
    }
  }
}
</style>
